<!--
 * @Date: 2022-04-08 16:19:15
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-20 14:41:12
 * @FilePath: \weibovue\src\components\userCard.vue
 * @Description: 用户卡片
-->
<template>
  <div class="userContainer">
    <div class="box">
      <div class="showText" v-if="!showBtnFlag"></div>
      <div class="avatar" v-else @click="goPersonal(userInfos.id)">
        <el-avatar shape="circle" size="large" :src="userInfos.avatar" />
      </div>
      <div class="loginButton" @click="goLogin" v-if="!showBtnFlag">
        立即登陆
      </div>
      <div class="logOutButton" @click="logOut" v-else>退出登陆</div>
      <div class="Text" v-if="!showBtnFlag">
        <span>还没有账号？</span>
        <i @click="goRegister">去注册</i>
      </div>
      <div class="Text" v-else>
        <i @click="goDetail">我的消息({{ atMeCount }})</i>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const router = useRouter();
const store = useStore();
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
const showBtnFlag = computed(() => store.state.isLogin);
const userInfos = computed(() => store.state.userInfos);
const atMeCount = computed(() => store.state.atMeCount);
//跳转登陆
const goLogin = () => {
  router.push({ name: "Login" });
};
//跳转注册
const goRegister = () => {
  router.push({ name: "Regsiter" });
};
//前往个人主页
const goPersonal = (id: number) => {
  router.push({ name: "Personal", params: { id } });
};
//跳转@详情
const goDetail = () => {
  router.push({ name: "atMeDetail" });
};
//退出登陆
const logOut = async () => {
  // console.log(store.state);
  let res = await $api.user.reqLogOut();
  // console.log(res);

  if (res.code == 200) {
    // console.log(store.state);
    store.commit("updateUserInfo", {});
    store.commit("updateLoginStatus", false);
    localStorage.removeItem("isLogin");
    sessionStorage.removeItem("vuex");
    ElMessage({
      type: "success",
      message: "退出成功",
    });
    router.push({ name: "Home" });
  }
};
</script>
<style lang="less" scoped>
.userContainer {
  width: 100%;
  height: 200px;
  background-color: antiquewhite;
  background: url(https://h5.sinaimg.cn/upload/1005/526/2021/08/23/bg.jpg)
    no-repeat;

  background-size: 100% 100%;

  .box {
    width: 140px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;

    .showText {
      width: 100%;
      height: 63px;
      background: url(https://h5.sinaimg.cn/upload/1005/526/2021/08/23/text.png)
        no-repeat;
      background-size: 100%;
      text-indent: -999px;
      overflow: hidden;
    }

    .loginButton,
    .logOutButton {
      text-align: center;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      width: 100%;
      height: 35px;
      border-radius: 35px;
      background-color: #ff8200;

      &:hover {
        cursor: pointer;
        background-color: #ff5900;
      }
    }

    .Text {
      font-size: 14px;

      span {
        color: #939393;
      }

      i {
        color: #ff8200;
        cursor: pointer;
      }
    }

    .avatar {
      cursor: pointer;
      .el-avatar {
        img {
          background-color: #ff8200;
        }
      }
    }
  }
}
</style>
